<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./css/message.css">
		<script src="./iconfont/iconfont.js"></script>
	</head>
	<body>
		<div class="index">
			<header>
				<div class="title">
					<a href="./search.html"><img src="./static/message/1699859817001.jpg" mode=""></img></a> 
				</div>
				
				<div class="box1"></div>

			</header>
			
			<main>
				<div class="box1">
					<div class="t1">
						<img src="./static/message/1699861147298.jpg"></img>
						
					</div>
					<div class="t2">
						<div class="t4">新朋友</div>
						<div class="t5">没有新通知</div>
					</div>
					<div class="t3">
						<img src="./static/message/1699861317174.jpg"></img>
						
					</div>
				</div>
				
				<div class="box1">
					<div class="t1">
						<img src="./static/message/1699861147298.jpg"></img>
						
					</div>
					<div class="t2">
						<div class="t4">互动消息.</div>
						<div class="t5">Tiam (见过王源版)赞了你的评论</div>
					</div>
					<div class="t3">
						<img src="./static/message/1699861317174.jpg"></img>
						
					</div>
				</div>
				
				<div class="box1">
					<div class="t1">
						<img src="./static/message/1699860075217.jpg"></img>
						
					</div>
					<div class="t2">
						<div class="t4">对标账号... <span class="t5">重燃中</span></div>
						<div class="t5">再连续聊天1天，重新..</div>
					</div>
					<div class="t3">
						<img src="./static/message/1699861654920.jpg"></img>
						
					</div>
				</div>
				
				<div class="box1">
					<div class="t1">
						<img src="./static/message/1699860680182.jpg"></img>
						
					</div>
					<div class="t2">
						<div class="t4">嘻嘻~</div>
						<div class="t5">你舞一段●12:17</div>
					</div>
					<div class="t3">
						<img src="./static/message/1699861958826.jpg"></img>
						
					</div>
				</div>
				
				<div class="box1">
					<div class="t1">
						<img src="./static/message/1699860700764.jpg"></img>
						
					</div>
					<div class="t2">
						<div class="t4">秘密基地</div>
						<div class="t5">别睡不行●12:02</div>
					</div>
					<div class="t3">
						
					</div>
				</div>
				
				<div class="box1">
					<div class="t1">
						<img src="./static/message/1699860680182.jpg"></img>
						
					</div>
					<div class="t2">
						<div class="t4">韩gei叭</div>
						<div class="t5">别睡 起来嗨</div>
					</div>
					<div class="t3">
						<img src="./static/message/1699861958826.jpg"></img>
						
					</div>
				</div>
				
				<div class="box1">
					<div class="t1">
						<img src="./static/message/1699860700764.jpg"></img>
						
					</div>
					<div class="t2">
						<div class="t4">妇女吴主任</div>
						<div class="t5">火花</div>
					</div>
					<div class="t3">
						<img src="./static/message/1699861958826.jpg"></img>
						
					</div>
				</div>
			</main>
			<nav class="footer">
				<ul>
					<li>
						<div>
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-shouye2"></use>
							</svg>
							<div>
								<a href="./home.html">首页</a> 
							</div>
						</div>
					</li>
					<li>
						<div>
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-mn_pengyou"></use>
							</svg>
							<div>
								<a href="./procedure.html">朋友</a> 
							</div>
						</div>
					</li>
					<li class="cap">
						<div>
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-plus"></use>
							</svg>
						</div>
					</li>
					<li>
						<div>
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-xiaoxi"></use>
							</svg>
							<div>
								<a href="./message.html">消息</a> 
							</div>
						   
						</div>
					</li>
					<li>
						<div>
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-wow"></use>
							</svg>
							<div>
								<a href="./user.html">我的</a> 
							</div>
							
						</div>
					</li>
		
				</ul>
			</nav>
		</div>
	</body>
	<script>
		var url=`http://rap2api.taobao.org/app/mock/315703/doyin.message`;
	
		var str="";
		const xhr = new XMLHttpRequest();
		xhr.open('GET', './json/2.json', true);
		xhr.onreadystatechange = function() {
		if (xhr.readyState === 4 && xhr.status === 200) {
			const jsonData = JSON.parse(xhr.responseText);

			console.log(jsonData.arr)
			// 处理返回的 JSON 数据
			for(let item of jsonData.arr){
                str+=`<div class="t1">
						<img src="${item.img}" mode=""></img>${item.name}
					</div>`
			}
			document.getElementsByClassName("box1")[0].innerHTML=str
		}
		};
		xhr.send();
	</script>
</html>